<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '首页',
    navigationBarTextStyle: '#0000FF',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#a8dced',
  },
}
</route>
<template>
  <view class="w-[100vw] content box-border">
    <wd-swiper :list="swiperList" autoplay v-model:current="current"></wd-swiper>
    <view class="h-[300px] mt-[20px] box-border">
      <wd-card title="测试柱状图">
        <qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
      </wd-card>
    </view>
    <wd-gap bg-color="rgb(246, 248, 248)"></wd-gap>
    <view class="h-[300px] box-border">
      <wd-card title="测试折线图">
        <qiun-data-charts type="line" :opts="opts2" :chartData="chartData2" />
      </wd-card>
    </view>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import swiper1 from '../../static/swaper/swiper1.png'
import swiper2 from '../../static/swaper/swiper2.png'
import swiper3 from '../../static/swaper/swiper3.png'

defineOptions({
  name: 'Middle',
})

const current = ref(0)
const swiperList = ref([swiper1, swiper2, swiper3])
const opts = ref({
  color: [
    '#FAC858',
    '#EE6666',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
  ],
  padding: [15, 15, 0, 5],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    data: [
      {
        min: 0,
      },
    ],
  },
  extra: {
    column: {
      type: 'group',
      width: 30,
      activeBgColor: '#000000',
      activeBgOpacity: 0.08,
      linearType: 'custom',
      seriesGap: 5,
      linearOpacity: 0.5,
      barBorderCircle: true,
      customColor: ['#FA7D8D', '#EB88E2'],
    },
  },
})
const chartData = ref({
  categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
  series: [
    {
      name: '目标值',
      data: [35, 36, 31, 33, 13, 34],
    },
    {
      name: '完成量',
      data: [18, 27, 21, 24, 6, 28],
    },
  ],
})
const opts2 = ref({
  color: [
    '#1890FF',
    '#91CB74',
    '#FAC858',
    '#EE6666',
    '#73C0DE',
    '#3CA272',
    '#FC8452',
    '#9A60B4',
    '#ea7ccc',
  ],
  padding: [15, 10, 0, 15],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true,
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
  },
  extra: {
    line: {
      type: 'straight',
      width: 2,
      activeType: 'hollow',
    },
  },
})
const chartData2 = ref({
  categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
  series: [
    {
      name: '测试A',
      data: [35, 8, 25, 37, 4, 20],
    },
    {
      name: '测试B',
      data: [70, 40, 65, 100, 44, 68],
    },
    {
      name: '测试C',
      data: [100, 80, 95, 150, 112, 132],
    },
  ],
})

onLoad(() => {})
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background-color: rgb(246, 248, 248);
  padding-bottom: 80upx;
  overflow-y: scroll;
}
</style>
